<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>事件处理</title>
  <script src="./js/jexcel.js"></script>
  <script src="./js/jsuites.js"></script>
  <link rel="stylesheet" href="./css/jsuites.css" type="text/css" />
  <link rel="stylesheet" href="./css/jexcel.css" type="text/css" />

  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>

<body>
  <h1>事件处理</h1>
  <h3>1，各种跟踪javascript方法</h3>
  <p>在javascript电子表格中绑定事件。</p>
  <div id="spreadsheet"></div>
  <div>
    <textarea id="log" style="width: 100%;"></textarea>
  </div>
  <a href="" target="_blanck">查看所有事件列表</a>

  <div>
    Jspreadsheet在这个版本中可用的事件。
    <ol>
      <li>onload：这个方法在setData方法时被调用</li>
      <li>onbeforechange：在更改列值之前。注意:通过在这个方法上返回一个新值，可以覆盖原来的值。v3.4.0 +</li>
      <li>onchange：列值更改后。</li>
      <li>onafterchanges：在表中应用所有更改之后。</li>
      <li>onpaste：在javascript表中执行粘贴操作之后。</li>
      <li>onbeforepaste：在执行粘贴操作之前。用于解析任何输入数据，应返回该数据。</li>
      <li>oninsertrow：插入新行之后。</li>
      <li>onbeforeinsertrow：在插入新行之前。您可以通过返回false来取消插入事件。</li>
      <li>ondeleterow：删除一行之后。</li>
      <li>onbeforedeleterow：删除一行之前。您可以通过返回false来取消删除事件。</li>
      <li>oninsertcolumn：插入新列之后。</li>
      <li>onbeforeinsertcolumn：在插入新列之前。您可以通过返回false来取消插入事件。</li>
      <li>ondeletecolumn：删除列后。</li>
      <li>onbeforedeletecolumn：在排除列之前。您可以通过返回false来取消插入事件。</li>
      <li>onmoverow：行移动到新位置后。</li>
      <li>onmovecolumn：列移动到新位置后。</li>
      <li>onresizerow：行高改变后。</li>
      <li>onresizecolumn：在改变列宽度之后。</li>
      <li>onselection：对选择的改变。</li>
      <li>onsort：列排序后。</li>
      <li>onfocus：On table focus</li>
      <li>onblur：On table blur</li>
      <li>onmerge：在列合并</li>
      <li>onchangeheader：头变化</li>
      <li>onundo：应用撤消时</li>
      <li>onredo：在重做时应用</li>
      <li>oneditionstart：当调用openEditor时。</li>
      <li>oneditionend：当一个关闭编辑器被调用。</li>
      <li>onchangestyle：当调用setStyle时。</li>
      <li>onchangemeta：当调用setMeta时。</li>
    </ol>
  </div>

  <h3>2、全局超级事件</h3>
  <p>一个处理在线电子表格上所有事件的方法。</p>
  <div id="spreadsheet2"></div>

</body>

<script>
  var changed = function (instance, cell, x, y, value) {
    var cellName = jexcel.getColumnNameFromId([x, y]);
    $('#log').append('New change on cell ' + cellName + ' to: ' + value + '');
  }

  var beforeChange = function (instance, cell, x, y, value) {
    var cellName = jexcel.getColumnNameFromId([x, y]);
    $('#log').append('The cell ' + cellName + ' will be changed');
  }

  var insertedRow = function (instance) {
    $('#log').append('Row added');
  }

  var insertedColumn = function (instance) {
    $('#log').append('Column added');
  }

  var deletedRow = function (instance) {
    $('#log').append('Row deleted');
  }

  var deletedColumn = function (instance) {
    $('#log').append('Column deleted');
  }

  var sort = function (instance, cellNum, order) {
    var order = (order) ? 'desc' : 'asc';
    $('#log').append('The column  ' + cellNum + ' sorted by ' + order + '');
  }

  var resizeColumn = function (instance, cell, width) {
    $('#log').append('The column  ' + cell + ' resized to width ' + width + ' px');
  }

  var resizeRow = function (instance, cell, height) {
    $('#log').append('The row  ' + cell + ' resized to height ' + height + ' px');
  }

  var selectionActive = function (instance, x1, y1, x2, y2, origin) {
    var cellName1 = jexcel.getColumnNameFromId([x1, y1]);
    var cellName2 = jexcel.getColumnNameFromId([x2, y2]);
    $('#log').append('The selection from ' + cellName1 + ' to ' + cellName2 + '');
  }

  var loaded = function (instance) {
    $('#log').append('New data is loaded');
  }

  var moveRow = function (instance, from, to) {
    $('#log').append('The row ' + from + ' was move to the position of ' + to + ' ');
  }

  var moveColumn = function (instance, from, to) {
    $('#log').append('The col ' + from + ' was move to the position of ' + to + ' ');
  }

  var blur = function (instance) {
    $('#log').append('The table ' + $(instance).prop('id') + ' is blur');
  }

  var focus = function (instance) {
    $('#log').append('The table ' + $(instance).prop('id') + ' is focus');
  }

  var paste = function (data) {
    $('#log').append('Paste on the table ' + $(instance).prop('id') + '');
  }

  var data = [
    ['Mazda', 2001, 2000, '2006-01-01'],
    ['Pegeout', 2010, 5000, '2005-01-01'],
    ['Honda Fit', 2009, 3000, '2004-01-01'],
    ['Honda CRV', 2010, 6000, '2003-01-01'],
  ];

  jspreadsheet(document.getElementById('spreadsheet'), {
    data: data,
    rowResize: true,
    columnDrag: true,
    columns: [
      { type: 'text', width: '200' },
      { type: 'text', width: '100' },
      { type: 'text', width: '100' },
      { type: 'calendar', width: '100' },
    ],
    onchange: changed,
    onbeforechange: beforeChange,
    oninsertrow: insertedRow,
    oninsertcolumn: insertedColumn,
    ondeleterow: deletedRow,
    ondeletecolumn: deletedColumn,
    onselection: selectionActive,
    onsort: sort,
    onresizerow: resizeRow,
    onresizecolumn: resizeColumn,
    onmoverow: moveRow,
    onmovecolumn: moveColumn,
    onload: loaded,
    onblur: blur,
    onfocus: focus,
    onpaste: paste,
  });
</script>

</html>